<template>
  <div>
    <Modal
      title="添加实验室工具"
      v-model="addModalToggle"
      @ok="handleOk2"
      @cancel="handleCancel2"
      :confirmLoading="confirmLoading"
    >
      <Form
        name="user"
        ref="formToolAdd"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        @finish="onToolFinish"
        :initialValues="{}"
      >
        <Card style="width: 100%" title="新增">
          <Row>
            <Col>
              <FormItem name="labToolName" label="工具名称" :rules="usernameRules">
                <Input placeholder="请输入工具名称" style="width: 100%" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col>
              <FormItem name="release" label="版本号" :rules="releaseRules">
                <Input placeholder="请输入版本号" style="width: 100%" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col>
              <FormItem name="remark" label="产品描述" :rules="remarkRules">
                <TextArea
                style="width: 100%"
                  placeholder="请输入产品描述"
                  allowClear
                />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col>
              <FormItem name="labToolMediaFile" label="工具介质">
                <!-- <Upload  :fileType="['rpm','deb','zip']" :fileSize="500"></Upload> -->
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col>
              <FormItem name="labToolHandBookFile" label="工具手册">
                <!-- <Upload :fileType="['doc','docx','pdf']" :fileSize="50"></Upload> -->
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col>
              <FormItem name="platform" label="适用平台" :rules="platformRules">
                <Select placeholder="请选择适用平台" style="width: 100%">
                  <Option
                    v-for="dict in dict.type.platform"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="24">
              <FormItem :wrapperCol="{span: 24}" style="text-align: center">
                <Button type="primary" size="md" style="width: 100px" @click="sumbitForm"
                  >提交</Button
                >
                <Button
                  style="margin-left: 20px; width: 100px"
                  size="md"
                  @click="handleCancel2"
                  >取消</Button
                >
              </FormItem>
            </Col>
          </Row>
        </Card>
      </Form>
    </Modal>
  </div>
</template>

<script>
import Upload from "@/components/upload/index";
import { listTool, getTool, delTool, addTool, updateTool } from "@/api/dotool/labtool";
import { Message } from '@uni/vue';
export default {
  dicts: ['platform'],
  props: {
    addModalToggle: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Upload,
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 20,
      },
      usernameRules: [{ required: true, message: "请输入角色名称" }],
      releaseRules: [{ required: true, message: "版本号不能为空" }],
      remarkRules: [{ required: true, message: "产品描述不能为空" }],
      platformRules: [{ required: true, message: "适用平台不能为空" }],
    };
  },
  methods: {
    sumbitForm() {
      this.$refs.formToolAdd.submit();
    },
    onToolFinish(formData) {
      console.log("formData:", formData)
       addTool(formData).then(response => {
         if(response.code==200) {
           Message.success({text: '新增成功'});
           this.$emit("addModalToggle", false);
           
         }else {
            Message.error({text: '新增失败'});
         }
          
              // this.getList();
        });
    },
    handleCancel2() {
      this.$emit("addModalToggle", false);
    },
    handleOk2() {
      this.confirmLoading = true;
      setTimeout(() => {
        this.confirmLoading = false;
        this.visible = false;
      }, 3000);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .uni-modal-body {
  padding: 0;
}
::v-deep .uni-modal-footer {
  display: none;
}
</style>